<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="设置门店" width="700" @ok="handleSubmit" destroyOnClose>
    <BasicForm @register="registerForm">
    </BasicForm>
  </BasicDrawer>
</template>
<script lang="ts" setup>
import { ref, computed, unref, useAttrs } from 'vue';
import { useModal } from '/@/components/Modal';
import { BasicForm, useForm } from '/@/components/Form/index';
import { settingFormSchema } from './store.data';
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
import { settingStore } from './store.api';
import { useMessage } from '/@/hooks/web/useMessage';
// 声明Emits
const emit = defineEmits(['success', 'register']);
const attrs = useAttrs()
const rowId = ref('');
const { createMessage } = useMessage();

const [registerForm, { setProps, resetFields, setFieldsValue, validate }] = useForm({
  labelWidth: 120,
  schemas: settingFormSchema,
  labelCol: {
    md: { span: 4 },
    sm: { span: 6 },
  },
  wrapperCol: {
    md: { span: 20 },
    sm: { span: 18 },
  },
  showActionButtonGroup: false,
});


const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
  await resetFields();
  setDrawerProps({ confirmLoading: false, showFooter: true })
  setFieldsValue({ 
    ...data.record
  })
});

async function handleSubmit() {
  try {
    let values = await validate();
    console.log('values', values);

    setDrawerProps({ confirmLoading: true });
    await settingStore({ 
      ...values,
      deliveryWays: values.deliveryWays.split(',')
    });
    emit('success');
    closeDrawer();
    createMessage.success('设置成功')
  } finally {
    setDrawerProps({ confirmLoading: false });
  }
}

</script>
